MediaWiki:Gadget-Lightbox.css

/* _____________________________________________________________________________ * |                                                                             | * |                    === WARNING: GLOBAL GADGET FILE ===                      | * |                 Changes to this page affect many users. | * |          Please discuss changes on the talk page before editing. | * |_____________________________________________________________________________| */ /* The Modal (background) */ .dw-img-modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 20; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.96); /* Black w/ opacity */ }

/* Modal Content (image) */ .dw-img-modal-content { margin: auto; display: block; width: auto; height: auto; }

/* Caption of Modal Image */ margin: auto; display: block; width: 80%; text-align: center; color: #ccc; padding: 10px 0; height: 150px; }
 * 1) dw-img-modal-caption {

margin: 0 auto; }
 * 1) dw-img-modal-wrapper {

/* Add Animation */ @-webkit-keyframes fadeIn { 0%  { opacity: 0; } 100% { opacity: 1; } }

@keyframes fadeIn { 0%  { opacity: 0; } 100% { opacity: 1; } }

.dw-img-modal-content, #dw-img-modal-caption { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

color: #007FFF; }
 * 1) dw-img-modal-caption a:link {

color: #975BFF; }
 * 1) dw-img-modal-caption a:visited {

/* The Close Button */ .dw-img-modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }

.dw-img-modal-close:hover, .dw-img-modal-close:focus { color: #bbb; text-decoration: none; cursor: pointer; }

/* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px) { .dw-img-modal-content { width: 100%; } }